<template>
  <el-dialog
    :title="$t('auth.role.relateuser')"
    :visible.sync="dialogRolesVisible"
    width="600px"
    @close='closeDialog'
  >
    <div style="text-align: center">
      <el-transfer
        v-model="value"
        :data="allUser"
        :props="{ key: 'id',label: 'user_name'}"
        :titles="[$t('auth.user.available'),$t('auth.user.granted')]"
        style="text-align: left; display: inline-block"
      ></el-transfer>
    </div>
    <template
      slot="footer"
      class="dialog-footer"
    >
      <center>
        <el-button @click="toggleSelection()">{{$t('auth.common.cancel')}}</el-button>
        <el-button
          type="primary"
          @click="associatedUser()"
        >{{$t('auth.common.confirm')}}</el-button>
      </center>
    </template>
  </el-dialog>
</template>

<script>
/* eslint-disable */
import {
  GetRoleList,
  AddRole,
  GetRoleById,
  UpdateRole,
  DeleteRole,
  GetUserById,
  UpdateUser
} from "../../../api/role";
export default {
  data () {
    return {
      listLoading: false, //数据加载等待动画
      dialogRolesVisible: false,
      value: [],
      user: [],//修改之前角色所拥有的用户
      tempRole: {
        name: "",
        id: "",
        description: ""
      }
    };
  },
  name: "users",
  props: {
    allUser: {
      type: [Array, Object],
      required: true
    }
  },
  methods: {
    associatedUser () {
      this.listLoading = true;
      if (JSON.stringify(this.value) == JSON.stringify(this.user)) {
        this.$message.error(this.$t('auth.role.nochangeserror'));
        return;
      }
      UpdateUser(this.tempRole.id, this.value).then(data => {
        if (data.data.code === '401') { // 判断用户是否在其他地方被踢出
          window.location.reload()
          return
        }
        if (data.data.success !== true) {
          this.$message.error(data.data.message);
          console.log(data.data.message);
          return;
        }
        let msg = this.$t('auth.common.relatesucess');
        this.listLoading = false;
        this.dialogRolesVisible = false;
        this.$message({
          message: msg,
          type: "success",
          duration: 1 * 1000,
          onClose: () => {
            this.$parent.getList();
          }
        });
      });
    },
    onUserClick (role) {
      this.tempRole.name = role.name;
      this.tempRole.id = role.id;
      this.tempRole.description = role.description;
      this.dialogRolesVisible = true;
      GetUserById(role.id).then(data => {
        if (data.data.code === '401') { // 判断用户是否在其他地方被踢出
          window.location.reload()
          return
        }
        if (data.data.success !== true) {
          this.$message.error(data.data.message);
          console.log(data.data.message);
          return;
        }
        for (let obj of data.data.data) {
          this.value.push(obj.user_id);
        }
      });
      this.user = this.value;
    },
    closeDialog () {
      this.value = [];
    },
    toggleSelection () {
      this.value = [];
      this.dialogRolesVisible = false;
    }
  }
};
</script>


<style lang="scss" rel="stylesheet/scss" scoped>
</style>
